<template>
  <div>
    <a-form :model="themForm" layout="vertical" @submit-success="submit">
      <a-card :bordered="false">
        <a-form-item :label="t['名称']" field="themeName" required>
          <a-input v-model="themForm.themeName"></a-input>
        </a-form-item>

        <a-form-item v-if="!themForm.groupsId" :label="t['尺寸']">
          <a-select :key="themForm.themeId" v-model="resolutionId">
            <a-option
              v-for="(item, key) in resolutionList"
              :key="key"
              :value="item.resolutionId"
              @click="selectResolution(item)"
            >
              {{ item.description }}
            </a-option>
          </a-select>
        </a-form-item>

        <a-form-item required :label="t['缩放']" field="scale">
          <a-input-number v-model="themForm.scale" :step="0.1" :max="4" :min="0.1"></a-input-number>
        </a-form-item>

        <a-form-item required :label="t['是否共享']" field="share">
          <a-radio-group
            v-model="themForm.share"
            :options="translateOptions(isList)"
          ></a-radio-group>
        </a-form-item>

        <a-form-item required :label="t['宽度']" field="width" disabled>
          <a-input-number v-model="themForm.width"></a-input-number>
        </a-form-item>

        <a-form-item required :label="t['高度']" field="height" disabled>
          <a-input-number v-model="themForm.height"></a-input-number>
        </a-form-item>

        <a-form-item disabled label="id">
          <a-input v-model="themForm.groupsId"></a-input>
        </a-form-item>
        <a-row>
          <a-button
            :loading="loading"
            :disabled="!themForm.width || !themForm.height"
            type="primary"
            html-type="submit"
          >
            {{ t["确定"] }}
          </a-button>
        </a-row>
      </a-card>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { isList } from "@/data/options/selection";

import { updateTheme } from "@/api/service/theme/theme";

import { queryModel, ResolutionModal } from "@/api/service/model/model";
import { componentList } from "../board/data/data";
import { showBoard, showForm, themForm } from "../data/form";

const t = translate("公共模块");
const loading = ref(false);
const resolutionId = ref();
const resolutionList = ref<ResolutionModal[]>([]);

const submit = async () => {
  if (!themForm.value.themeId) {
    showBoard.value = true;
  } else {
    await updateTheme(themForm.value);
  }
  resolutionId.value = "";
  componentList.value = [];
  showForm.value = false;
};
const selectResolution = (item: ResolutionModal) => {
  themForm.value.width = item.width;
  themForm.value.height = item.height;
  themForm.value.scale = item.scale;
};

onMounted(async () => {
  if (!themForm.value.groupsId) {
    const data = await queryModel();
    resolutionList.value = data.data.filter((v) => {
      if (v.id! > 100) return v;
    });
  }
});

onUnmounted(() => {
  resolutionId.value = "";
});
</script>

<style lang="scss" scoped></style>
